<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    body {
      margin: 0px;
      background-color: #000000;
      overflow: hidden;
    }
  </style>

  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>

</head>

<body>
  <div style="position: fixed;bottom: 0px;left: 100px;">
    <button onclick="R()">R</button>
    <button onclick="U()">U</button>
    <button onclick="F()">F</button>
    <br/>
    <button onclick="R(false)">R'</button>
    <button onclick="U(false)">U'</button>
    <button onclick="F(false)">F'</button>
    <br/>

    <button onclick="L()">L</button>
    <button onclick="D()">D</button>
    <button onclick="B()">B</button>
    <br/>
    <button onclick="L(false)">L'</button>
    <button onclick="D(false)">D'</button>
    <button onclick="B(false)">B'</button>
    <br/>
  </div>

  <div style="position: fixed;bottom: 0px;left: 250px;">
    <button onclick="r()">r</button>
    <button onclick="u()">u</button>
    <button onclick="f()">f</button>
    <br/>
    <button onclick="r(false)">r'</button>
    <button onclick="u(false)">u'</button>
    <button onclick="f(false)">f'</button>
    <br/>

    <button onclick="l()">l</button>
    <button onclick="d()">d</button>
    <button onclick="b()">b</button>
    <br/>
    <button onclick="l(false)">l'</button>
    <button onclick="d(false)">d'</button>
    <button onclick="b(false)">b'</button>
    <br/>
  </div>

  <div style="position: fixed;bottom: 0px;left: 400px;">
    <button onclick="M()">M</button>
    <button onclick="E()">E</button>
    <button onclick="S()">S</button>
    <br/>
    <button onclick="M(false)">M'</button>
    <button onclick="E(false)">E'</button>
    <button onclick="S(false)">S'</button>
    <br/>
  </div>

  <div style="position: fixed;bottom: 0px;left: 550px;">
    <button onclick="x()">x</button>
    <button onclick="y()">y</button>
    <button onclick="z()">z</button>
    <br/>
    <button onclick="x(false)">x'</button>
    <button onclick="y(false)">y'</button>
    <button onclick="z(false)">z'</button>
    <br/>
  </div>

  <div style="position: fixed;bottom: 0px;left: 700px;">
    <button onclick="upset()">打乱</button>
    <button onclick="restore()">还原</button>
  </div>

</body>

<script src="js/Block.js"></script>
<script src="js/MagicCube.js"></script>


<script>

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
  camera.position.set(10,10,10);
  camera.lookAt(scene);
  var ctrl = new THREE.OrbitControls(camera);

  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );

  document.body.appendChild( renderer.domElement );

  var magicCube = new MagicCube({
      scene: scene
  });

  function animate() {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
  }
  animate();

  function R(clockwise) {
      magicCube.R(clockwise);
  }
  function U(clockwise) {
      magicCube.U(clockwise);
  }
  function F(clockwise) {
      magicCube.F(clockwise);
  }
  function L(clockwise) {
      magicCube.L(clockwise);
  }
  function D(clockwise) {
      magicCube.D(clockwise);
  }
  function B(clockwise) {
      magicCube.B(clockwise);
  }

  function r(clockwise) {
      magicCube.r(clockwise);
  }
  function u(clockwise) {
      magicCube.u(clockwise);
  }
  function f(clockwise) {
      magicCube.f(clockwise);
  }
  function l(clockwise) {
      magicCube.l(clockwise);
  }
  function d(clockwise) {
      magicCube.d(clockwise);
  }
  function b(clockwise) {
      magicCube.b(clockwise);
  }

  function M(clockwise) {
      magicCube.M(clockwise);
  }
  function E(clockwise) {
      magicCube.E(clockwise);
  }
  function S(clockwise) {
      magicCube.S(clockwise);
  }

  function x(clockwise) {
      magicCube.x(clockwise);
  }
  function y(clockwise) {
      magicCube.y(clockwise);
  }
  function z(clockwise) {
      magicCube.z(clockwise);
  }

  function upset() {
      magicCube.upset();
  }
  function restore() {
      magicCube.restore();
  }

</script>
</html>
